<template>
  <view style="width: 100%;">
    <view class="sales flex-block" v-if="type == 'horizontal'">
      <view class="sales-img">
        <image :src="data.avatar" :style="{ width: size, height: size }" mode="aspectFill" />
      </view>
      <view style="flex: 1; width: 0;">
        <view class="flex-block" style="height: 100%;">
          <view class="flex-block flex-col p-l-10" style="height: 100%; flex: 1; width: 0;">
            <view class="sales-title txt-normal">{{ data.skuName || data.name || '未知商品' }}</view>
            <view class="sales-txt txt-small u-tips-color" style="flex: 1;">{{ data.name }}</view>
            <view class="txt-small">
              <text class="u-tips-color">数量: </text>
              <text class="u-warning-dark">{{ data.quantity }}</text>
            </view>
          </view>
          <view>
            <view class="txt-large">¥{{ data.price }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="sales-dynamic" :style="{ width: size }" @click="toGoodsInfo" v-if="type == 'vertical'">
      <view>
        <image :src="data.avatar" :style="{ width: size, height: size }" mode="aspectFill" />
      </view>
      <view class="u-p-l-15 u-p-b-10 u-p-r-15">
        <view class="u-m-t-10">
          <u-text :text="data.name || '未知商品'" size="14" :lines="1" />
        </view>
        <view class="u-m-t-10 u-m-b-10" style="width: 100%;">
          <u-text :text="data.subTitle || '未知商品描述'" size="12" :lines="1" :color="$u.color.tipsColor" style="flex: 1;" />
        </view>
        <up-row type="flex" justify="space-between">
          <view class="txt-normal u-warning-dark">¥{{ data.price || '--' }}</view>
          <view class="txt-mini u-tips-color">销量: {{ data.saleCount }}</view>
        </up-row>
      </view>
    </view>

    <view class="sales flex-block" v-if="type == 'cart'">
      <view class="sales-img">
        <image :src="data.avatar" :style="{ width: size, height: size }" mode="aspectFill" />
      </view>
      <view style="flex: 1; width: 0;">
        <view class="flex-block" style="height: 100%;">
          <view class="flex-block flex-col p-l-10" style="height: 100%; flex: 1; width: 0;">
            <view class="sales-title txt-normal u-line-2" style="flex: 1;">
              {{ data.skuName || data.name || '未知商品' }}
            </view>
            
            <up-row type="flex" justify="space-between">
              <view class="txt-large u-warning-dark">¥{{ data.price || '--' }}</view>
              <view class="numberbox">
                <uni-number-box
                  v-if="allowQuantity"
                  v-model="data.quantity"
                  @change="changeNum(data)"
                  :min="0"
                ></uni-number-box>
                <u-text :text="`数量: ${data.quantity}`" :color="$u.color.tipsColor" v-else />
              </view>
            </up-row>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'horizontal'
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    size: {
      type: String,
      default: '164px'
    },
    allowQuantity: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    changeNum(item) {
      this.$nextTick(_=>{

        if (item.quantity == 0) {
          this.$api.cart.delete({
            id: item.id
          }).then(res => {
            this.$emit('changeNum')
          })
          return
        }
        
        this.$api.cart.update({
          id: item.id,
          quantity: item.quantity
        }).then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '修改成功',
              mask: true
            })
            this.$emit('changeNum')
          }
        })
      })
    },
    toGoodsInfo() {
      uni.navigateTo({
        url: '/pages/goods-info/goods-info?id=' + this.data.id
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.sales {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  &-img {
    width: 168rpx;
    height: 168rpx;
    background: #f4f4f4;
    border-radius: 12px;
  }
}
.sales-dynamic {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx;
  border: 1rpx solid #eeeeee;
  overflow: hidden;
}
</style>